<style scoped>
	uni-page-body {
  height: 100%;
}
.weather {
  height: 100%;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  position: relative;
}
.weatherImg {
  height: 100%;
  background-size: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cityTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 64px 0;
  margin-bottom: 50px;
}
.cityTitleName {
  display: flex;
  font-size: 14px;
  color: #fff;
}
.selcetCity {
  border: none;
  background: none;
  outline: none;
}

.cityInfo {
  display: flex;
  font-size: 12px;
  width: 80%;
  /* margin: 0 auto; */
  justify-content: center;
  color: #fff;
}
.scroll-view {
  position: absolute;
  left: 0px;
  bottom: 130px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.scroll-item {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
  padding: 10px 15px 14px;
}

.dayNum {
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-block;
  font-size: 14px;
  margin: 10px 0;
  color: #333;
}
.days {
  font-weight: bold;
  margin-bottom: 6px;
  color: #666;
}
.date {
  color: #999;
}
.weekdays {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.zhiShuIndex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin:20px 10px;
}
.left,
.right {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #fff;
  padding: 0 5px;
}
.iconImg {
  width: 50px;
  height: 50px;
}
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
  width: 660upx;
  height: 240upx;
  background-color: #ffffff;
}

.charts {
  width: 660upx;
  height: 240upx;
  background-color: #ffffff;
  /* position: absolute; */
}
</style>



<template>
	<view class="weather">
		<view class="weatherImg" style="background: url('../../../static/image/weather_bg.png') no-repeat center;">
			<view class="cityTitle">
				<view class="cityTitleName">
					<uni-icons type="location-filled" size="20" color="#fff"></uni-icons>
					<text style="width: 70px;">当前位置：</text>
					<view style="width: 80px; padding-left: 5px;">
						<view style="display: flex;justify-content: space-between;align-items: center;" @click="showWeiZiName">
							<text v-text="currentWeiZi"></text>
							<uni-icons type="arrowdown" size="10" color="#fff" style="float: right;"></uni-icons>
						</view>
						<view style="display: flex;flex-direction: column;position: absolute;background:none;color:#fff">
							<text v-for="item in WeiZiList" :key="item.WeiZiId" v-show="showWZName" @click="WZName(item.WZName)" style="margin-top:5px">{{ item.WZName}}</text>
						</view>
					</view>
					<view style="width: 80px; padding-left: 15px;">
						<view style="display: flex;justify-content: space-between;align-items: center;" @click="showCityName">
							<text v-text="currentCity"></text>
							<uni-icons type="arrowdown" size="10" color="#fff" style="float: right;"></uni-icons>
						</view>
						<view style="display: flex;flex-direction: column;position: absolute;background:none;color:#fff">
							<text v-for="item in CityList" :key="item.cityid" v-show="showcName" @click="CityName(item.cName)" style="margin-top:5px">{{ item.cName}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cityInfo">
				<view style="display:flex;flex-direction: column;align-items: center;width:80%">
					<image :src="weatherimgNum" style="width:60px;height:60px;z-index:999" />
					<text style="margin-left:10px;font-size:30px;margin-top:20px;">{{weatherInfo.weather || 0}}</text>
				</view>
				<view style="display:flex;flex-direction: column;justify-content: center;align-items: center;width:100%;">
					<text style="font-size:60px;">{{weatherInfo.temp || 0}}°</text>
					<text style="margin:7px auto;">最低温度:{{weatherInfo.templow}}°~最高温度:{{weatherInfo.temphigh}}°</text>
					<text style="font-size:14px;">{{ weatherInfo.date }}&emsp;|&emsp;{{weatherInfo.week}}</text>
				</view>
			</view>
		</view>
		<view class="scroll-view">
			<view id="demo1" class="scroll-item">
				<text class="dayNum">未来一周天气变化</text>
				<view style="display:flex;justify-content: space-around;font-size:12px;margin:6px 0;">
					<view class="weekdays" v-for="item in futureDay" :key="item.index">
						<text class="days">{{ item.week }}</text>
						<text class="date">{{ item.date.substring(5,10) }}</text>
					</view>
				</view>
				<view style="display:flex;justify-content: space-around;margin: 5px 0;">
					<image :src="item.imgurl" style="width:30px;height:30px" v-for="item in futureDay" :key="item.id" />
				</view>
				<view class="weatherChart" style="flex: 1;">
					<view class="qiun-columns">
						<view class="qiun-charts">
							<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA" style="border: none;"></canvas>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="position: absolute;bottom:5px;display:flex;width: 100%;">
			<view class="zhiShuIndex">
				<view class="left" style="width: 80px;">
					<image class="iconImg" :src="iconIndex" />
					<text style="font-size:14px;color:#fff">{{chuanYIndex.iname}}</text>
				</view>
				<view class="right">
					<text style="font-size:18px;color:#fff">{{chuanYIndex.ivalue}}</text>
					<text style="color:#eee">{{chuanYIndex.detail}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from "../../../api/apis.js";
	import selectWimg from '../../../components/selectweatherimg/selectweatherimg.js';
	import uniIcons from "@/components/uni-icons/uni-icons";
	import uniCard from "@/components/uni-card/uni-card";
	import uCharts from "@/components/u-charts/u-charts.js";


	var _self;
	var canvaLineA = null;
	export default {
		data() {
			return {
				weatherimgNum: require("../../../static/weathericon/0.png"),
				iconIndex: require("../../../static/image/icon_index_chuanyi.png"),
				weatherForCity: [],
				WeiZiList: [{
						WeiZiId: 1,
						WZName: "四川省"
					},
					{
						WeiZiId: 2,
						WZName: "湖南省"
					}
				],
				CityList: [{
						cityid: "2766",
						cName: "九寨沟县"
					},
					{
						cityid: "321",
						cName: "成都"
					},
					{
						cityid: "322",
						cName: "绵阳"
					},
					{
						cityid: "2754",
						cName: "江油"
					}
				],
				weatherImage: require("../../../static/image/1.png"),
				weatherInfo: {
					temp: "",
					weather: "",
					templow: "",
					temphigh: "",
					date: "",
					week: ""
				},
				futureDay: [],
				weatherimg: [
					require("../../../static/weathericon/1.png"),
					require("../../../static/weathericon/2.png"),
					require("../../../static/weathericon/3.png"),
					require("../../../static/weathericon/4.png"),
					require("../../../static/weathericon/5.png"),
					require("../../../static/weathericon/6.png"),
					require("../../../static/weathericon/7.png")
				],
				currentWeiZi: "四川省",
				currentCity: "九寨沟县",
				showWZName: false,
				showcName: false,
				Datetime: "",
				chuanYIndex: {},
				pixelRatio: 1,
				chartData1: {},
				items: []
			};
		},
		components: {
			uniIcons,
			uniCard
		},
		onLoad() {},
		methods: {
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + " " + item.name + ":" + item.data;
					}
				});
			},
			getCityInfo() {
				let _this = this;
				this.items = [];
				ajax({
					url: "/weather/getWeatherInfo?city=" + _this.currentCity,
					method: "GET",
					success: res => {
						let Num = res.data.result.img;
						console.log(Num)
						_this.weatherimgNum = require("../../../static/weathericon/" + Num + ".png")//大图片
						_this.weatherInfo = res.data.result; //城市信息
						let arr = [...res.data.result.daily];
						console.log([...arr])
						for (let item of [...arr]) {
							item['imgurl'] = require("../../../static/weathericon/" + item.day.img + ".png");//一周图片
						}
						console.log(arr);
						_this.futureDay = arr;

						_this.Datetime = _this.weatherInfo.date.substring(5, 10); //日期

						let chuanYIndexArr = [...res.data.result.index].splice(-1, 1); //指数
						_this.chuanYIndex = chuanYIndexArr[0];
						console.log(_this.chuanYIndex);

						let temp = {
							//图表
							WhiteDay: [],
							Night: []
						};
						let TempArr = res.data.result.daily;
						let categories = [];
						let series1 = [{
								name: "最高气温",
								data: [],
								color: "#009FF1"
							},
							{
								name: "最低气温",
								data: [],
								color: "#009FF1"
							}
						];
						for (let item of TempArr) {
							let obj = {};
							obj["temphigh"] = item.day.temphigh;
							obj["templow"] = item.night.templow;
							obj["day"] = item.date;
							obj["week"] = item.week;
							_this.items.push(obj);
						}

						_this.items.forEach(item => {
							categories.push(item.week);
							series1[0].data.push(item.temphigh);
							series1[1].data.push(item.templow);
						});

						_this.chartData1["categories"] = categories;
						_this.chartData1["series"] = series1;
						_this.chatrs();
					},
					fail: error => {
						console.log(error);
					}
				});
			},
			showCityName() {
				this.showcName = !this.showcName;
			},
			showWeiZiName() {
				this.showWZName = !this.showWZName;
			},
			WZName(weizi) {
				this.currentWeiZi = weizi;
				this.showWeiZiName();
			},
			CityName(city) {
				// console.log(city)
				this.currentCity = city;
				this.getCityInfo();
				this.showCityName();
			},
			chatrs() {
				let _this = this;
				// console.log(_this.chartData.series);
				canvaLineA = new uCharts({
					$this: _this,
					canvasId: "canvasLineA",
					type: "line",
					fontSize: 11,
					legend: {
						show: false
					},
					dataLabel: true,
					dataPointShape: true,
					background: "#FFFFFF",
					pixelRatio: 1,
					categories: _this.chartData1.categories,
					series: _this.chartData1.series,
					animation: true,
					xAxis: {
						type: "none",
						gridType: "none",
						disabled: true,
						disableGrid: true
					},
					yAxis: {
						gridType: "none",
						disabled: true,
						disableGrid: true,
						min: -30,
						max: 50
					},
					width: uni.upx2px(660),
					height: uni.upx2px(240),
					extra: {
						line: {
							type: "straight"
						}
					}
				});
			}
		},
		mounted() {
			let _this = this;
			_this.getCityInfo()
		},
		onPullDownRefresh() {
			this.getCityInfo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	};
</script>
